<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>员工列表</title>
<%
	pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<!-- web路径：
不以/开始的相对路径，找资源，以当前资源的路径为基准，经常容易出问题。
以/开始的相对路径，找资源，以服务器的路径为标准(http://localhost:3306)；需要加上项目名
		http://localhost:3306/crud
 -->
	<script type="text/javascript"
			src="${APP_PATH }/web/static/js/jquery-1.12.4.min.js"></script>
	<link
			href="${APP_PATH }/web/static/bootstrap-3.4.1-dist/css/bootstrap.min.css"
			rel="stylesheet">
	<script
			src="${APP_PATH }/web/static/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
</head>
<body>
	<!-- 搭建显示页面 -->
	<div class="container">
		<!-- 1.标题 -->
		<div class="row">
			<div class="col-md-12">
				<h1>SSM-CRUD</h1>
			</div>
		</div>
		<!-- 2.按钮 -->
		<div class="row">
			<div class="col-md-4 col-md-offset-8">
				<button class="btn btn-primary">新增</button>
				<button class="btn btn-danger">删除</button>
			</div>
		</div>
		<!-- 3.显示表格数据 -->
		<div class="row">
			<div class="col-md-12">
				<table class="table table-hover" id="emps_table">
					<thead>
						<tr>
							<th>#</th>
							<th>员工姓名</th>
							<th>性别</th>
							<th>邮箱</th>
							<th>部门名</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>

					</tbody>
				</table>
			</div>
		</div>

		<!-- 4.显示分页信息 -->
		<div class="row">
			<!--4.1分页文字信息  -->
			<div class="col-md-6" id="page_info_area">
				<!--里面的内容由下面的build_page_info(result);填充-->
			</div>
			<!-- 4.2分页条信息 -->
			<div class="col-md-6" id="page_info_nav">
				<!--里面的内容由下面的build_page_nav(result);填充-->
			</div >
		</div>

	</div>

	<script type="text/javascript">
		//页面加载完成后，直接发送ajax请求，要到分页数据
		$(function () {
			$.ajax({
				url:"${APP_PATH}/emps",
				data:"pn=1",
				type:"GET",
				success:function (result) {//成功后访问的方法
					// console.log(result);
					//1.解析并显示员工数据
					build_emps_table(result);
					//2.解析并显示分页数据
					build_page_info(result);
					//3.解析并显示分页条信息
					build_page_nav(result);
				}
			});
		});

		//1.往表格体中解析数据
		function build_emps_table(result) {
			var emps = result.extend.pageInfo.list;
			$.each(emps,function (index, item) {
				// alert(item.empName);
				var empIdTd = $("<td></td>").append(item.empId);
				var empNameTd = $("<td></td>").append(item.empName);
				var genderTd = $("<td></td>").append(item.gender=='M'?'男':'女');
				var emailTd = $("<td></td>").append(item.email);
				var deptNameTd = $("<td></td>").append(item.department.deptName);
				/**
				 * <button class="btn btn-primary btn-sm">
				 <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
				 编辑
				 </button>
				 */
				var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm")
						.append($("<span></span>").addClass("glyphicon glyphicon-pencil"))
						.append("编辑");
				var delBtn = $("<button></button>").addClass("btn btn-danger btn-sm")
						.append($("<span></span>").addClass("glyphicon glyphicon-trash"))
						.append("删除");
				var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn);
				//append方法执行完后返回原来的元素
				$("<tr></tr>").append(empIdTd)
						.append(empNameTd)
						.append(genderTd)
						.append(emailTd)
						.append(deptNameTd)
						.append(btnTd)
						.appendTo("#emps_table tbody")
			});
		}
		//2.解析显示分页数据
		function build_page_info(result) {
			$("#page_info_area").append("第 "+result.extend.pageInfo.pageNum+"页 "+
					"总 "+result.extend.pageInfo.pages+"页 "+
					"总  "+result.extend.pageInfo.total+"条记录")
		}
		//3.解析显示分页条
		function build_page_nav(result) {
			var ul = $("<ul></ul>").addClass("pagination");

			var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href", "#"));
			var prePageLi = $("<li></li>").append($("<a></a>").append("$laquo;"));
			var nextPageLi = $("<li></li>").append($("<a></a>").append("$raquo;"));
			var lastPageLi = $("<li></li>").append($("<a></a>").append("尾页").attr("href", "#"));

			ul.append(firstPageLi).append(prePageLi);//添加首页前一页
			$.each(result.extend.pageInfo.navigatepageNums,function (index, item) {
				var numLi = $("<li></li>").append($("<a></a>")).append(item);
				ul.append(numLi);//添加页号
			})
			ul.append(nextPageLi).append(lastPageLi);//添加后一页，尾页

			var navEle = $("<nav></nav>").append(ul);//构建导航
			navEle.appendTo("#page_info_nav");
		}
	</script>
</body>
</html>